<template>
    <div class="slider">
        <div class="slides" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
            <div class="slide" v-for="(slide, index) in slides" :key="index"
                :style="{ backgroundImage: `url(/images/${slide.image})`, textAlign: 'center', padding: '0px', backgroundSize: 'cover', backgroundPosition: 'center' }">
                <h2>{{ slide.title }}</h2>
                <p>{{ slide.content }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
    slides: Array,
});

const currentSlide = ref(0);

// 每3秒切换幻灯片
onMounted(() => {
    setInterval(() => {
        currentSlide.value = (currentSlide.value + 1) % props.slides.length;
    }, 3000);
});
</script>

<style scoped>
.slider {
    max-width: 100%;
    /* margin: 20px auto; */
    position: relative;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    width: 100vh;
    min-width: 100%;
    height: 400px;
    /* Adjust height as needed */
    color: white;
    /* Ensure text is readable against images */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>